import React,{useCallback, useEffect, useState} from 'react';
import {View,TouchableOpacity,StyleSheet,ImageBackground,ScrollView,Text,Image,Button,DeviceEventEmitter} from 'react-native';
import '../../global'
import {useSelector} from 'react-redux';
import { useFocusEffect } from '@react-navigation/native';
import {useNum} from '../../context'


let imgURL= require('../../assets/image/background.jpg');


const Word = ({navigation,route}) => {
    const list=useSelector(state=>state.list)
    const [allnum,setAllnum]=useState(0);
    const {num0,setNum0} = useNum();
    
    
    useFocusEffect(
        useCallback(()=>{
            fetch('https://wx.qasdwer.top:8080/home/getwordnum',{
            method:'post',
            headers:{
              'content-type':'application/json;charset=utf-8'
            },
            body:JSON.stringify({user_number:list.account})
          })
        .then(res=>res.json())
        .then(res=>{ 
          setAllnum(res)
        })
        .catch((error)=>{
          console.log("Error");
          throw error;
        });
        },[])
    )
  return (
    <ScrollView>
        <View>
            <ImageBackground style={styles.bg} source={imgURL}>
                <View style={styles.owncon1}>
                    <View style={styles.ownmes}>
                        <Image source={{uri:list.img}} style={styles.ownimg} />
                    </View>
                    <View style={styles.vomes}>
                        <View style={styles.detailmes}>
                            <Text>今日单词</Text>
                            <Text style={{textAlign:'center'}}>150</Text>
                        </View>
                        <View style={styles.detailmes}>
                            <Text>今日背过</Text>
                            <Text style={{textAlign:'center'}}>{num0}</Text>
                        </View>
                        <View style={styles.detailmes}>
                            <Text>剩余单词</Text>
                            <Text style={{textAlign:'center'}}>{150-num0}</Text>
                        </View>
                        <View style={styles.detailmes}>
                            <Text>我的单词</Text>
                            <Text style={{textAlign:'center'}}>{allnum}</Text>
                        </View>
                    </View>
                    
                </View>
                
            </ImageBackground>
            <TouchableOpacity style={styles.button1} onPress={()=>{
                fetch('https://wx.qasdwer.top:8080/home/getwords',{
                    method:'post',
                    headers:{
                      'content-type':'application/json;charset=utf-8'
                    },
                    body:JSON.stringify({user_number:list.account})
                  })
              .then(res=>res.json())
              .then(res=>{ 
              
                navigation.navigate('Words',{list:res})
              })
              .catch((error)=>{
                  console.log("Error");
                  throw error;
                });
                        
            }}>
                <Text style={styles.font}>开始学习</Text>
            </TouchableOpacity>
        </View>
        <View style={styles.owncon2}>
            <View style={{marginTop:changeH(20)}}>
                <Text style={{textAlign:'center',fontSize:changeW(30),color:'#CCBE97'}}>单词进度</Text>
            </View>
            <View style={styles.process}>
                <View style={styles.process1}>
                    <Text>{allnum}</Text>
                    <Text>1000</Text>
                </View>
                <View style={styles.process2}>
                    <View style={{width:(allnum/1000)*100+'%',
        height:changeH(50),
        borderRadius:changeW(25),
        backgroundColor:'#CCBE97',
        marginLeft:-changeW(3),
        marginTop:-changeW(3)}}></View>
                </View>
                <View style={styles.process3}>
                    <Text>已完成</Text>
                    <Text>未完成</Text>
                </View>
            </View>
        </View>
    </ScrollView>
  )
}

const styles=StyleSheet.create({
    bg:{
        width:'100%',
        height:changeH(450),
    },
    ownimg:{
        width:changeW(120),
        height:changeW(120),
        borderRadius:changeW(60)
    },
    ownmes:{
        marginLeft:changeW(290),
        marginTop:changeH(30)
    },
    owncon1:{
        width:'95%',
        marginLeft:changeW(20),
        borderRadius:changeW(20),
        marginTop:changeH(180),
        backgroundColor:'white',
        borderRadius:changeW(30),
        height:changeH(500)
    },
    owncon2:{
        width:'95%',
        marginLeft:changeW(20),
        borderRadius:changeW(20),
        marginTop:changeH(180),
        marginTop:changeH(280),
        backgroundColor:'white',
        borderRadius:changeW(30)
    },
    button1:{
        width:'80%',
        height:changeH(90),
        backgroundColor:'#CCBE97',
        display:'flex',
        alignItems:'center',
        justifyContent:'center',
        borderRadius:changeW(30),
        position:'absolute',
        left:changeW(70),
        bottom:changeH(-200)
    },
    font:{
        fontSize:changeW(25),
        fontWeight:'bold',
        color:'white'
    },
    vomes:{
        flexDirection:'row',
        justifyContent:'space-around',
        marginTop:changeH(80)
    },
    detailmes:{
        flexDirection:'column',
        justifyContent:'space-between'
    },
    process:{
        width:'85%',
        marginTop:changeH(50),
        marginLeft:changeW(50)
    },
    process1:{
        flexDirection:'row',
        justifyContent:'space-between'
    },
    process2:{
        width:'100%',
        height:changeH(50),
        borderRadius:changeH(25),
        borderColor:'#CCBE97',
        borderWidth:changeW(3),
        marginTop:changeH(20),
        marginBottom:changeH(20)
    },
    process3:{
        flexDirection:'row',
        justifyContent:'space-between'
    },
    process4:{
        
    }
})

export default Word